import React from 'react';
import PropTypes from 'prop-types';
import {Table, Card, Button, Spin} from 'antd';
import routes from './routes';
import {getDetail} from './api';
import DataSet from '@antv/data-set';
import {formatAmount} from '../utils';
import {TABLE, Chart, Geom, Tooltip, Coord, Legend, Label} from 'bizcharts';
const {DataView} = DataSet;

export class DetailPanel extends React.PureComponent {
    state = {
        loading: false,
        data: {}
    };
    componentDidMount() {
        this.getDetailInfo();
    }
    getDetailInfo = () => {
        const id = this.props.id;
        this.setState({loading: true});
        getDetail(id)
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        data: res.data,
                    });
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }

    getTable = data => [{
        value1: data[0] ? data[0].value : '',
        value2: data[1] ? data[1].value : '',
        value3: data[2] ? data[2].value : '',
        value4: data[3] ? data[3].value : '',
    }]
    render() {
        const detailData = this.state.data || {};
        const {varietyData = [], amountMeetData = [], quantityData = []} = detailData;
        const {formatMessage} = this.props.intl;
        const columns = [{
            title: formatMessage({
                id: 'tablePanel.column.value1',
                defaultMessage: '1个月'
            }),
            dataIndex: 'value1',
        }, {
            title: formatMessage({
                id: 'tablePanel.column.value2',
                defaultMessage: '3个月'
            }),
            dataIndex: 'value2',
        }, {
            title: formatMessage({
                id: 'tablePanel.column.value3',
                defaultMessage: '6个月'
            }),
            dataIndex: 'value3',
        }, {
            title: formatMessage({
                id: 'tablePanel.column.value4',
                defaultMessage: '12个月'
            }),
            dataIndex: 'value4',
        }];
        const columns2 = [{
            title: formatMessage({
                id: 'tablePanel.column.value1',
                defaultMessage: '1个月'
            }),
            dataIndex: 'value1',
            render: text => `$${formatAmount(text)}`
        }, {
            title: formatMessage({
                id: 'tablePanel.column.value2',
                defaultMessage: '3个月'
            }),
            dataIndex: 'value2',
            render: text => `$${formatAmount(text)}`
        }, {
            title: formatMessage({
                id: 'tablePanel.column.value3',
                defaultMessage: '6个月'
            }),
            dataIndex: 'value3',
            render: text => `$${formatAmount(text)}`
        }, {
            title: formatMessage({
                id: 'tablePanel.column.value4',
                defaultMessage: '12个月'
            }),
            dataIndex: 'value4',
            render: text => `$${formatAmount(text)}`
        }];
        const dv = new DataView();
        dv.source(varietyData).transform({
            type: 'percent',
            field: 'value',
            dimension: 'name',
            as: 'percent'
        });
        const dv2 = new DataView();
        dv2.source(amountMeetData).transform({
            type: 'percent',
            field: 'value',
            dimension: 'name',
            as: 'percent'
        });
        const dv3 = new DataView();
        dv3.source(quantityData).transform({
            type: 'percent',
            field: 'value',
            dimension: 'name',
            as: 'percent'
        });
        const cols = {
            percent: {
                formatter: val => {
                    val = `${val * 100}%`;
                    return val;
                }
            }
        };
        return (
            <div>
                <Spin spinning={this.state.loading}>
                    <Card.Grid>
                        <Card>
                            <Card.Meta
                                title={formatMessage({
                                    id: 'detailPage.column.varietyQuantity',
                                    defaultMessage: '品种'
                                })}
                                description={<Table
                                    className={'white-space-nowrap'}
                                    columns={columns}
                                    dataSource={this.getTable(varietyData)}
                                    loading={this.props.loading || this.state.loading}
                                    rowKey="value1"
                                    pagination={false}
                                    {...TABLE}/>}/>
                        </Card>
                        <Card>
                            <Chart data={dv} scale={cols} forceFit>
                                <Coord type="theta"/>
                                <Tooltip showTitle={false} />
                                <Legend name="name" visible={true} />
                                <Geom
                                    type="intervalStack"
                                    position="value"
                                    color="name">
                                    <Label content="value"
                                        offset={-80}
                                        formatter={(text, item, index) => `${item.point.value}，${(item.point.percent * 100).toFixed(0)}%`}
                                        textStyle={{
                                            rotate: 0,
                                            textAlign: 'center',
                                            shadowBlur: 2,
                                            shadowColor: 'rgba(0, 0, 0, .45)'
                                        }}/>
                                </Geom>
                            </Chart>
                        </Card>
                    </Card.Grid>
                    <Card.Grid>
                        <Card>
                            <Card.Meta
                                title={formatMessage({
                                    id: 'detailPage.column.amount',
                                    defaultMessage: '金额'
                                })}
                                description={<Table
                                    className={'white-space-nowrap'}
                                    columns={columns}
                                    dataSource={this.getTable(amountMeetData)}
                                    loading={this.props.loading || this.state.loading}
                                    rowKey="value1"
                                    pagination={false}
                                    {...TABLE}/>}/>
                        </Card>
                        <Card>
                            <Chart data={dv2} scale={cols} forceFit>
                                <Coord type="theta"/>
                                <Tooltip showTitle={false} />
                                <Legend name="name" visible={true} />
                                <Geom
                                    type="intervalStack"
                                    position="value"
                                    color="name">
                                    <Label content="value"
                                        offset={-80}
                                        formatter={(text, item, index) => `$${formatAmount(item.point.value)}，${(item.point.percent * 100).toFixed(0)}%`}
                                        textStyle={{
                                            rotate: 0,
                                            textAlign: 'center',
                                            shadowBlur: 2,
                                            shadowColor: 'rgba(0, 0, 0, .45)'
                                        }}/>
                                </Geom>
                            </Chart>
                        </Card>
                    </Card.Grid>
                    <Card.Grid>
                        <Card>
                            <Card.Meta
                                title={formatMessage({
                                    id: 'detailPage.column.packing',
                                    defaultMessage: '包装单元'
                                })}
                                description={<Table
                                    className={'white-space-nowrap'}
                                    columns={columns}
                                    dataSource={this.getTable(quantityData)}
                                    loading={this.props.loading || this.state.loading}
                                    rowKey="value1"
                                    pagination={false}
                                    {...TABLE}/>}/>
                        </Card>
                        <Card>
                            <Chart data={dv3} scale={cols} forceFit>
                                <Coord type="theta"/>
                                <Tooltip showTitle={false} />
                                <Legend name="name" visible={true} />
                                <Geom
                                    type="intervalStack"
                                    position="value"
                                    color="name">
                                    <Label content="value"
                                        offset={-80}
                                        formatter={(text, item, index) => `${item.point.value}，${(item.point.percent * 100).toFixed(0)}%`}
                                        textStyle={{
                                            rotate: 0,
                                            textAlign: 'center',
                                            shadowBlur: 2,
                                            shadowColor: 'rgba(0, 0, 0, .45)'
                                        }}/>
                                </Geom>
                            </Chart>
                        </Card>
                    </Card.Grid>
                </Spin>
                <div className="page-toolbar">
                    <Button
                        type="primary"
                        disabled={this.state.loading}
                        onClick={this.props.onCancel}>{formatMessage({
                            id: 'detailPage.btn.return',
                            defaultMessage: '返回'
                        })}</Button>
                </div>
            </div>
        );
    }
}

DetailPanel.propTypes = {
    id: PropTypes.string.isRequired,
    onCancel: PropTypes.func.isRequired,
    history: PropTypes.object,
    intl: PropTypes.object,
};

import {connect} from 'react-redux';
import {injectIntl} from './intl';
const mapStateToProps = (state, props) => ({
    id: props.id,
});
const mapDispatchToProps = (dispatch, props) => ({
    onCancel: () => {
        props.history.push(routes.query.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DetailPanel));
